<template>
	<view class="single-img" :class="singleImgStyle == 0 ? 'style-0':'style-1'">
		<view class="item" @click="params[0].link.type == 'tominiprogram'? $refs.toMP.toMiniprogram(params[0].link):util.goToLink(params[0].link)">
			<!-- #ifdef APP-PLUS -->
			<image :lazy-load="true" :src="params[0].img_url"></image>  
			<!-- #endif --> 
			 <!-- #ifdef MP -->  
			<image mode="widthFix" :src="params[0].img_url" @error="imageError" class="image"></image>
			<!-- #endif -->  
			<!-- #ifdef H5 -->  
			<img class="image" v-lazy="params[0].img_url">  
			<!-- #endif --> 
		</view>
		<!-- 跳转小程序码 -->
		<toMiniprogram ref="toMP" />
	</view>
</template>

<script>
	import toMiniprogram from '@/common/components/tominiprogram.vue'
	export default {
		name: 'SingleImg',
		props: {
			title: {
				type: String,
				default: '单图广告'
			},
			type: {
				type: String,
				default: 'single_img',
			},
			singleImgStyle: {
				type: Number,
				default: 0,
			},
			params: {
				type: Array,
				default: [],
			}
		},
		components: {
			toMiniprogram
		},
		data() {
			return {

			}
		},
		created() {
			//console.log(this.params)
		},
		methods: {
			
		},
		
	}
</script>

<style lang="scss">
	.single-img {
		margin: 20rpx auto;
		position: relative;
		z-index: 2;
		.item {
			
			.image {
				display: block;
				width: 100%;
				will-change: transform;
			}
		}
	}
	.single-img.style-0 {
		margin: 0;
	}
	.single-img.style-1 {
		margin: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
</style>
